<template>
	<div class="plan-item-list padding-20 row-option">
		<div class="plan-item-left">
			<div class="plan-item-text">
				<ai-cell title="策案编号：" :value="itemList.id" />
			</div>
			<div class="plan-item-title plan-flex margin-t-20">
				<ai-cell3 title="包含客群" :content="getClusterName(itemList.clusterList)" :value="itemList.clusterList.length" />
				<ai-cell title="目标引流" :value="itemList.attractionTarget" />
				<ai-cell title="实际引流" :value="itemList.attractedCustomerCount" />
			</div>
			<div class="plan-item-text margin-t-30">
				<ai-cell title="策划关键词：" :value="getKeywords(itemList.keywords)" />
			</div>
			<div class="plan-item-text plan-flex margin-t-15">
				<ai-cell title="长图文" value="46/45" />
				<ai-cell title="短文评论" value="567/1000" />
				<ai-cell title="短视频" value="32/15" />
				<ai-cell title="创意图" value="32/30" />
			</div>
			<div class="plan-item-text plan-item-flex-between plan-flex margin-t-15">
				<div class="plan-item-text-left plan-flex">
					<ai-cell title="生成时间" :value="itemList.createTime" />
					<ai-cell
						title="预期持续时间"
						:value="diffDate(itemList.startDate, itemList.endDate)"
					/>
				</div>
				<div class="plan-item-text-right">
					<el-popover :visible="visible" placement="bottom" :width="75">
						<div class="plan-item-select">
							<el-button
								class="plan-item-select-content"
								type="primary"
								plain
								size="small"
								@click="goAddPlanning(itemList)"
								>查看明细</el-button
							>
							<el-button
								class="plan-item-select-content"
								type="primary"
								plain
								size="small"
								@click="deletePlanning(itemList.id)"
								>删除策案</el-button
							>
							<el-button v-show="itemList.status==2"
								class="plan-item-select-content"
								type="primary"
								plain
								size="small"
								@click="updatePlanning(itemList.id)"
								>封存策案</el-button
							>
						</div>
						<template #reference>
							<el-button
								class="plan-item-select"
								type="primary"
								plain
								size="small"
								@click="visible = !visible"
								>操作</el-button
							>
						</template>
					</el-popover>
				</div>
			</div>
		</div>
		<div class="plan-item-right">
			<div class="plan-item-top plan-flex">
				<div class="plan-item-star-view plan-flex">
					<div class="plan-item-star" v-for="item in itemList.level"><star-filled /></div>
				</div>
				<el-tag
					class="plan-item-content"
					style="margin-left: 5px;"
					type="primary"
					>{{ testByStatus(itemList.status) }}</el-tag
				>
				<el-tag
					class="plan-item-content"
					style="margin-left: 5px;"
					disable
					type="primary"
					>超预期</el-tag
				>
			</div>
			<div class="plan-item-echart">
				<div ref="chart" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs } from "vue";
import aiCell from '/@/components/aiCell.vue'
import aiCell3 from '/@/components/aiCell3.vue'
import { StarFilled } from '@element-plus/icons-vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import * as echarts from "echarts";
import { router, service,storage } from "/@/cool";
import { timeFormat } from "/@/utils/tools";
let props = defineProps({
	itemList: {
		type: Object,
		default: () => {
			return {};
		},
	},
})
let emits = defineEmits(['statusChange'])
let { itemList } = toRefs(props)
let visible = ref(false)
const chart = ref(null);
let myChart = <any>{};
let option = {
	xAxis: {
		type: 'category',
		data: ['10-1', '10-2', '10-3', '10-4', '10-5', '10-6', '10-7', '10-8', '10-9', '10-10', '10-11', '10-12', '10-13', '10-14', '10-15', '10-16', '10-17', '10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24', '10-25', '10-26']
	},
	yAxis: {
		type: 'value',
		show: false

	},
	grid: {
		top: "0px",
		left: "0px",
		right: "0px",
		bottom: "30px"
	},
	series: [
		{
			lineStyle: {
				color: "#F8A2A1",
				join: "miter"
			},
			data: [150, 230, 224, 218, 135, 147, 760, 232, 222, 264, 90, 140, 232, 101, 264, 20, 340, 250, 164, 140, 240, 150, 232, 101, 264, 90],
			type: 'line'
		}
	]
};
const diffDate = (d1: string, d2: string) => {
	let d3 = new Date(d2).getTime() - new Date(d1).getTime(); //时间差的毫秒数
	//计算出相差天数
	var days = Math.floor(d3 / (24 * 3600 * 1000))
	//计算出小时数
	var leave1 = d3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
	var hours = Math.floor(leave1 / (3600 * 1000))
	//计算相差分钟数
	var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
	var minutes = Math.floor(leave2 / (60 * 1000))
	return days + " 天 " + hours + " 小时 " + minutes + " 分钟"
}
//策划方案显示
const getClusterName=(value:any)=>{
	let str:string[] = [];
	value.forEach(item=>{
		str.push(item.clusterName)
	})
	return value && value.length>0? str.join("、"):"";
}
const testByStatus = (status: number) => {
	let str = '';
	switch (status) {
		case 0:
			str = "未开始"
			break;
		case 1:
			str = "进行中"
			break;
		case 2:
			str = "已结束"
			break;
	}
	return str;
}
const getKeywords = (keywords)=>{
	return keywords.replace(/---|,/g,"，");
}
//跳转修改策案明细
const goAddPlanning=(item)=>{
	storage.set("keywords",item.keywords)
	router.push({
		path:"/work/planning/planning-list",
		query:{
			plan_name:item.planName,
			plan_id:item.id,
			startDate:timeFormat(item.startDate,"YYYY-MM-DD"),
			endDate:timeFormat(item.endDate,"YYYY-MM-DD"),
		}
	})
}
// 更新指定id的策案3为封存状态
const updatePlanning=(id)=>{
	service.campaign.plan.update({
		id:id,
		status: 3
	}).then(()=>{
		setTimeout(()=>{
			ElMessage.info("更新成功！");
			visible.value = false;
			emits("statusChange",true)
		},1000)
	})
}
// 删除指定id的策案
const deletePlanning=(ids)=>{
	ElMessageBox.confirm('真的确定要删除选中的策案吗?')
    .then(() => {
      console.log(ids,"ids")
	  service.campaign.plan.delete({
		"ids":[ids]
	  }).then(()=>{
		setTimeout(()=>{
			ElMessage.info("删除成功！")
			visible.value = false;
			emits("statusChange",true)
		},1000)
	  })
    })
    .catch(() => {
      // catch error
    })
}
onMounted(() => {
	myChart = echarts.init(chart.value, 'macarons');
	myChart.setOption(option);
})
</script>

<style scoped lang="scss">
.plan-item-select {
	width: 75px;
	margin: 0 auto;

	.el-button + .el-button {
		margin-left: 0;
		margin-top: 10px;
	}
}

.plan-item-list {
	border: solid 1px #ccc;
	box-shadow: 1px 1px 1px #ccc;
	border-radius: 8px;
	align-items: stretch;

	.margin-t-30 {
		margin-top: 30px;
	}

	.plan-item-select-content {
		width: 100%;
		margin-left: 0;
	}

	.margin-t-15 {
		margin-top: 15px;
	}

	.plan-flex {
		display: flex;
		align-items: center;
	}

	.plan-item-flex-between {
		justify-content: space-between;
	}

	.ai-cell {
		margin-left: 20px;

		&:first-child {
			margin-left: 0;
		}
	}

	.plan-item-text {
		font-size: 14px;
		line-height: 16px;
		color: #666666;
	}

	.plan-item-title {
		font-size: 30px;
		line-height: 32px;
		color: #333333;
		font-weight: 700;
	}

	.plan-item-left {
		width: 680px;
	}

	.plan-item-top {
		justify-content: right;

		.plan-item-star {
			width: 14px;
			height: 16px;
			line-height: 16px;
			font-size: 14px;
			color: yellow;
		}

		.plan-item-star + .plan-item-star {
			margin-left: 5px;
		}
	}

	.plan-item-right {
		width: calc(100% - 680px);
		margin-left: 100px;
		flex: 1 auto;

		.plan-item-echart {
			width: 100%;
			height: calc(100% - 16px);
		}
	}
}

.plan-item-list + .plan-item-list {
	margin-top: 50px;
}
</style>
